<template>
  <div class="cfjscreen-content mg-t-21">
    <div class="cfjscreen-content-top flex-nowrap">
      <div class="box-bg left-box mg-r-21">
        <screenTitle title="总分拣进度"></screenTitle>
        <div class="flex">
          <div id="gauge-plan"></div>
          <img class="chart-light" src="../../assets/images/fjscreen/light.png" />
          <div class="gauge-info">
            <div class="flex">
              <p>发货日期：{{ gaugeInfo.sort_date }}</p>
              <img @click="openDatePicker" src="../../assets/images/fjscreen/time.png" alt="">
              <el-date-picker v-model="gaugeInfo.sort_date" type="date" ref="screenDataPicker" placeholder="选择日期" @change="handleDateChange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </div>
            <p>单位（单）</p>
            <p>总数：{{ gaugeInfo.total }}</p>
            <p>已分拣：{{ gaugeInfo.sorted_num }}</p>
            <p>未分拣：{{ gaugeInfo.no_sorted_num }}</p>
          </div>
        </div>
      </div>
      <div class="box-bg right-box">
        <screenTitle title="TOP10分拣绩效"></screenTitle>
        <div id="chart-line"></div>
      </div>
    </div>
    <div class="cfjscreen-content-container flex-nowrap mg-t-21">
      <div class="box-bg mg-r-21 container-left height-600">
        <screenTitle title="客户分拣进度"></screenTitle>
        <div class="flex">
          <div class="container-left-wrap">
            <div class="flex">
              <img class="success" src="@/assets/images/fjscreen/notsuccess.png" alt="未完成">
              <p>未完成</p>
            </div>
            <div class="table-scroll">
              <vueSeamlessScroll :data="productPlan" class="line-table" :class-option="optionSetting">
                <clientProgress class="mg-b-10" v-for="item in clientPlan" :key="item.user_name" :name="item.user_name" :percentage="item.sort_speed"></clientProgress>
              </vueSeamlessScroll>
            </div>
          </div>
          <div class="container-left-wrap">
            <div class="flex">
              <img class="success" src="@/assets/images/fjscreen/success.png" alt="已完成">
              <p>已完成</p>
            </div>
            <div class="table-scroll">
              <vueSeamlessScroll :data="productPlan" class="line-table" :class-option="optionSetting">
                <clientProgress class="success-progress mg-b-10" v-for="item in finishClientPlan" :key="item.user_name" :name="item.user_name" :percentage="item.sort_speed"></clientProgress>
              </vueSeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-nowrap container-right">
        <div class="box-bg container-client height-600 small-warp">
          <div class="padding-30">
            <screenTitle title="商品分拣进度" :isSmall="true"></screenTitle>
          </div>
          <div class="padding-30">
            <div class="max-height">
              <productProgress class="client-progress" v-for="item in productPlan" :key="item.goods_name" :name="item.goods_name" :percentage="item.speed"></productProgress>
            </div>
          </div>
        </div>
        <div class="box-bg height-600 small-warp special-padding">
          <div class="special-padding-wrap">
            <screenTitle class="" title="分拣员分拣TOP" :isSmall="true"></screenTitle>
          </div>
          <div class="special-padding-wrap">
            <div class="flex sorter-title mg-t-21">
              <div class="flex">
                <img class="polygon" src="@/assets/images/fjscreen/polygon.png" alt="">
                <p>分拣员ID</p>
              </div>
              <p>单</p>
            </div>
          </div>
          <div class="sorter-container">
              <div class="sorter-container-item flex" v-for="(item, index) in sorterID" :key="item.user_name">
                <div class="flex">
                  <div class="item-num">
                    <div class="item-num-bg"></div>
                    <p :class="{'item-margin': index > 8}">{{ index + 1 }}</p>
                  </div>
                  <p>{{ item.user_name }}</p>
                </div>
                <p>{{ item.total_order }}</p>
              </div>
            </div>
        </div>
        <div class="box-bg mini-warp">
          <screenTitle title="缺货商品" :isSmall="true"></screenTitle>
          <div class="special-padding-wrap">
            <div class="flex sorter-title mg-t-21">
              <div class="flex">
                <img class="polygon" src="@/assets/images/fjscreen/polygon.png" alt="">
                <p>商品</p>
              </div>
            </div>
          </div>
          <div id="chart-pie"></div>
          <div class="mini-wrap-list mg-t-10">
            <div class="mini-item flex" v-for="item in lackProduct" :key="item.name">
              <p>{{ item.goods_name }}</p>
              <p>{{ item.total_orders }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { getGoodsSortSpeed, getUserSortSpeed, getUserSortRank, getOutOfStockGoods, getAllSortSpeed, getSortRank, getSortedUsers } from '@/api/fjscreen/index.js'
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
import screenTitle from './components/title.vue'
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import productProgress from './components/productProgress.vue'
import clientProgress from './components/clientProgress.vue'
import { parseTime } from "@/utils/index";
import allData from './mockData'
const { productPlan, clientPlan, sorterID, gaugeChart, gaugeInfo, lackProduct, lineChart, pieChart , finishClientPlan  } = allData
export default {
  components: { screenTitle, productProgress, clientProgress, vueSeamlessScroll },
  data() {
    return {
      productPlan,  //  商品分拣进度
      clientPlan, //  客户分拣进度
      finishClientPlan, // 已完成客户分拣进度
      sorterID,   //  分拣员ID
      gaugeChart,  //  总分拣进度图表
      gaugeInfo,  //  总分拣进度
      lackProduct,  //  缺货商品
      lineChart,  //  折线图
      pieChart,  //  饼图
      date: null,
      timer: null,
      dateTime: parseTime(new Date(), "{y}-{m}-{d}"),
      // dateTime: '2024-06-26',
    }
  },
  computed:{
    //控制滚动属性
    optionSetting(){
      return{
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        autoPlay: true, // 是否自动滚动
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted () {
    this.getAllData()
    this.drawLine('gauge-plan', this.gaugeChart)
    this.drawLine('chart-line', this.lineChart)
    this.drawLine('chart-pie', this.pieChart)
  },
  created () {
    
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);
        myChart.clear();
        myChart.setOption(option);
        let listener = function() {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    openDatePicker() {
      this.$refs.screenDataPicker.focus()
    },
    getAPIParams(pagesize = 20) {
      const params = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        {
          time: this.dateTime,
          page: 1,
          pagesize
        }
      );
      return params
    },
    //  定时更新数据接口
    timeRequest() {
      this.timer = setInterval(() => {
        setTimeout(() => {
          this.getProductData()
        }, 0)
        setTimeout(() => {
          this.getClientData();
          this.getSortedUsers();
        }, 5000)
        setTimeout(() => {
          this.getSorterData()
        }, 8000)
        setTimeout(() => {
          this.getGaugeData()
        }, 12000)
        setTimeout(() => {
          this.getLackProductData()
        }, 16000)
        setTimeout(() => {
          this.getLineData()
        }, 20000)
      }, 30000)
    },
    handleDateChange(val) {
      this.dateTime = val
      this.getAllData()
    },
    getAllData() {
      this.timer && clearInterval(this.timer);
      this.getProductData();
      this.getClientData();
      this.getSortedUsers();
      this.getSorterData();
      this.getGaugeData() ;
      this.getLackProductData();
      this.getLineData();
      this.timeRequest();
    },
    //  获取商品分拣进度数据
    getProductData() {
      getGoodsSortSpeed(this.getAPIParams()).then(({ errcode, data }) => {
        if(data && data.length) {
          this.productPlan = data.map(el => {
            el.speed = +el.speed
            return el
          })
        }else  {
          this.productPlan = []
        }
      })
    },
    //  获取客户分拣进度数据
    getClientData() {
      getUserSortSpeed(this.getAPIParams()).then(({ errcode, data }) => {
        if(data && data.length) {
          this.clientPlan = data.map(el => {
            el.sort_speed = el.sort_speed * 100
            return el
          })
        }else  {
          this.clientPlan = []
        }
      })
    },
    //  获取已完成客户分拣进度数据
    getSortedUsers() {
      getSortedUsers(this.getAPIParams()).then(({ errcode, data }) => {
        if(data && data.length) {
          this.finishClientPlan = data.map(el => {
            el.sort_speed = el.sort_speed * 100
            return el
          })
        }else  {
          this.finishClientPlan = []
        }
      })
    },
    //  获取分拣员分拣TOP数据
    getSorterData() {
      getUserSortRank(this.getAPIParams()).then(({ errcode, data }) => {
        if(data && data.length) {
          this.sorterID = data
        }else  {
          this.sorterID = []
        }
      })
    },
    //  获取缺货商品数据
    getLackProductData() {
      getOutOfStockGoods(this.getAPIParams(10)).then(({ errcode, data }) => {
        if(data && data.length) {
          this.lackProduct = data
          const colorList = ['#00FCFF', '#08EE8A', '#1DC0DE', '#2871B5', '#00C0FF', '#0072FF']
          this.pieChart.series[0].data = data.map((el, index) => {
            return {
              value: el.total_orders,
              name: el.goods_name.split('【')[0],
              itemStyle: { color: colorList[index] } 
            }
          })
        }else  {
          this.lackProduct = []
          this.pieChart.series[0].data = []
        }
        this.drawLine('chart-pie', this.pieChart)
      })
    },
    //  获取总分拣进度数据
    getGaugeData(time) {
      getAllSortSpeed(this.getAPIParams(time)).then(({ errcode, data }) => {
        if(data && data.sort_rate) {
          this.gaugeInfo = data;
          const sort_rate = +data.sort_rate >= 1 ? 0.9999 : +data.sort_rate
          this.gaugeChart.series[0].axisLine.lineStyle.color = [
              [0, 'red'],
              [sort_rate, 'rgba(32,187,252,0.15)'],
              [1, '#7dedff']
          ]
          this.gaugeChart.title.text = (data.sort_rate * 100).toFixed() + '%';
        }else {
          this.gaugeInfo = {
            sort_date: this.dateTime,
            no_sorted_num: 0,
            sort_rate: 0,
            sorted_num: 0,
            total: 0
          };
          this.gaugeChart.series[0].axisLine.lineStyle.color = [
              [0, 'red'],
              [0, 'rgba(32,187,252,0.15)'],
              [1, '#7dedff']
          ]
          this.gaugeChart.title.text = 0 + '%';
        }
        this.drawLine('gauge-plan', this.gaugeChart)
      })
    },
    //  获取分拣效率数据
    getLineData() { 
      getSortRank(this.getAPIParams()).then(({data}) => {
        if(data && data.sortOrderRank) {
          this.lineChart.series[0].data = data.sortOrderRank.map(el => el.total_order)
          this.lineChart.series[1].data = data.sortOrderNumRank.map(el => el.total_order_num)
          this.lineChart.xAxis.data = data.sortOrderRank.map(el => el.sort_uid)
          this.drawLine('chart-line', this.lineChart)
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
$color: #fff;
.box-bg {
  background: rgba(36,41,75,0.15);
  box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.15);
  border-radius: 6px;
  border: 2px solid #3578DC;
  padding: 10px 30px 0;
  &.special-padding {
    padding: 10px 12px 0;
    .special-padding-wrap {
      padding: 0 16px;
    }
  }
}
.mg-r-21 {
  margin-right: 21px;
}
.mg-t-21 {
  margin-top: 21px;
}
.mg-t-10 {
  margin-top: 10px;
}
.mg-t-38 {
  margin-top: 38px;
}
.cfjscreen-content {
  padding: 0 60px;
  .flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
  }
  .flex-nowrap {
    display: flex;
    justify-content: space-between;
  }
  .left-box {
    width: 640px;
    height: 280px;
    flex-shrink: 0;
  }
  .right-box, .container-right {
    flex: 1;
  }
  .height-600 {
    height: 620px;
  }
  .small-warp {
    flex: 1;
    &:nth-child(2) {
      margin: 0 16px;
    }
  }
  .container-left {
    width: 640px;
    flex-shrink: 0;
    .table-scroll {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 500px;
      overflow-y: auto;
      margin-top: 23px;
      padding-right: 20px;
    }
    .container-left-wrap {
      width: 275px;
      margin-top: 18px;
      .line-table {
        flex: 1;
      }
      .flex {
        justify-content: flex-start;
        p {
          font-family: PingFang SC;
          font-weight: 800;
          font-size: 20px;
          color: #D2E7FF;
          margin-left: 9px;
        }
      }
      
    }
  }
  .client-progress {
    width: 100%;
  }
  .container-client {
    padding: 10px 0;
    .padding-30 {
      padding: 0 30px;
    }
  }
  .sorter-title {
    align-items: center;
    .flex {
      align-items: center;
    }
    .polygon {
      width: 12px;
      height: 18px;
      margin-right: 11px;
    }
    p {
      color: $color;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 20px;
    }
  }
  .sorter-container {
    margin-top: 14px;
    max-height: 490px;
    overflow-y: auto;
    padding:0 16px;
    &-item {
      width: 100%;
      height: 48px;
      line-height: 48px;
      padding: 0 4px 0 20px;
      color: $color;
      &:nth-child(2n - 1) {
        background: rgba(0,33,153, .5);
      }
      &:first-child .item-num .item-num-bg {
        background: url('../../assets/images/fjscreen/num-bg1.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(2) .item-num .item-num-bg {
        background: url('../../assets/images/fjscreen/num-bg2.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-child(3) .item-num .item-num-bg {
        background: url('../../assets/images/fjscreen/num-bg3.png') no-repeat;
        background-size: 100% 100%;
      }
      .item-num {
        position: relative;
        width: 26px;
        .item-num-bg {
          width: 26px;
          height: 22px;
          background: url('../../assets/images/fjscreen/num-bg.png') no-repeat;
          background-size: 100% 100%;
          position: absolute;
          top: 12px;
          left: -9px;
          z-index: 1;
        }
        .item-margin {
          margin-left: -5px;
        }
        p {
          position: relative;
          z-index: 2;
        }
      }
    }
  }
  #gauge-plan {
    width: 60%;
    height: 216px;
  }
  #chart-line {
    width: 99%;
    height: 190px;
    margin-top: 20px;
  }
  #chart-pie {
    width: 100%;
    height: 300px;
  }
  .gauge-info {
    color: $color;
    font-size: 18px;
    margin-top: 22px;
    p {
      line-height: 36px;
      position: relative;
      z-index: 2;
    }
    img {
      width: 23px;
      height: 23px;
      margin-left: 10px;
      cursor: pointer;
      position: relative;
      z-index: 2;
    }
    .flex {
      position: relative;
      align-items: center;
      /deep/.el-date-editor {
        position: absolute;
        right: -164px;
        opacity: 0;
        z-index: 1;
      }
    }
  }
  .mini-warp {
    width: 370px;
    height: 620px;
    .mini-wrap-list {
      height: 160px;
      padding-right: 20px;
      overflow-y: auto;
      p {
        color: rgba(255,255,255, .8);
        font-size: 16px;
        line-height: 30px;
      }
    }
  }
  .max-height {
    max-height: 500px;
    padding-right: 20px;
    margin-top: 30px;
    overflow-y: auto;
  }
}
.chart-light {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 6px;
  left: 75px;
}
.success-progress {
  /deep/.el-progress-bar__inner {
    background-image: linear-gradient(to right, #0384F5, #FFEA39);
  }
}
</style>